
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品结算页</title>
    <style type="text/css">
    	*{
    width: 100%;
	padding: 0px;
	margin: 0px;

}
.top{
	width:100%;
	height: 40px;
	margin: 40px auto 0px;
	color:#000;
	border:0px;
	display: block;
	text-align: center;
}
.leftreturn{
  position: absolute;
  left:0;
  z-index: 5;
  background-image: url("../../image/leftreturn.png");
  background-position: 0px 0px;
  width:25px;
  height:25px;
  margin:7.5px 0;
}
.top-title{
  line-height: 20px;
  font-size: 20px;
}
.content{
	width:95%;
	height: auto;
	margin: 0 auto;
	margin-top: 0;
	background: white;
	color:#000000;
  border: 1px solid #ccc;
  border-radius: 8px;
	font-size: 14px;
  padding-bottom: 5px;
}

.content-heji{
  width:90%;
  height: 40px;
background: white;
color: #000000;
margin:20px auto;
font-size: 18px;
line-height: 40px;
padding-left: 30px;
border: 1px solid #ccc;
border-radius: 8px;
}
.button {
  height: 40px;
  margin: 0 auto;
  background: #0082e4;
  color: #FFFFFF;
  font-size: 18px;
  border: 1px;
  display: block;
  float:right;
  width:160px;
  border-radius: 0px 8px 8px 0px;
}
.content-xinxi{
	width:100%;
	height: 80px;
	margin: 0 auto;
	background: white;
	color:#000000;
	border:0px;
	display: block;
	font-size: 17px;
	margin-top: 15px;

}
.picture{
  width:70px;
	height: 70px;
	border: 1px solid #f5f5f5;
	margin-left: 10px;
  margin-right: 3px;
  padding: 2px;
  float: left;

}

.picture img{
  width: 70px;
  height: 70px;
  border-radius: 6px;
}
.content-text{
	width:90%;
	height: 30px;
	margin:  auto;
	color:#000000;
	border:1px;
	border-style: solid;
	border-color: #999999;
	display: block;
	font-size: 14px;
	float: left;
}
.content-xinxi1{
  width: auto;
  float: left;
  margin-left: 5px;
  padding: 2px;
}
.xinxi1_title{
  width:160px;
  font-size: 12px;
  font-family: songti;
  color:#000;
  height:20px;
  margin:0;
}
.xinxi1_classfy{
  width:150px;
  height:auto;
  background-color:#f5f5f5;
  font-size: 10px;
  font-family: songti;
  padding-left: 10px;
}
.xinxi1_money{
  width:auto;
  float:right;
  font-size: 13px;
}
.xinxi1_sum{
  width:auto;
  float:right;
  margin-left:5px;
  font-size:12px;
  color: #ccc;
  margin-top:3px;
}
.yunshu{
  height: 40px;
  background: white;
  color:#000000;
  border:0px;
  display: block;
  font-size: 14px;
  margin-top: 15px;
}
.content_address{
  width:95%;
  height:90px;
  border:1px solid #ccc;
  border-radius:8px;
  margin:10px auto;
  background-color: #fff;

}
.name{
  font-size: 14px;
  font-weight: bold;
  width:auto;
  float: left;
  background-color: #fff;
  margin-top:10px;
  margin-left: 10px;

}
.telephone{
  font-size: 10px;
  background-color: #fff;
  width:auto;
  margin-top: 14px;
  margin-left:10px;
  float: left;

}
.dizhi{
  width: 100%;
  font-size: 12px;
  float: left;
  height: 5px;
  padding:10px;
  background-color: #fff;
}
.xinxi_dizhi{
  width:70%;
  height:90px;
  float:left;
}
.bgcolor{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fafafa;
  z-index: -1;
}
    </style>
</head>
<body>
<div class="bgcolor">
	<div class="top">
    <i class="leftreturn"></i>
		<h1 class="top-title">商品结算页</h1>
	</div>
  <div class="content_address">
    <img src="../../image/spjsy_dizhi.png" alt="" style="  background-color: #fff;float:left;width:35px;height:35px;margin-top:27.5px;margin-left:5px;">
    <div class="xinxi_dizhi" id="xinxi_dizhi">
    </div>
    <img src="../../image/rightreturn.png" alt="" style="  background-color: #fff;float:right;width:35px;height:35px;margin-top:27.5px;margin-right:5px;" onclick="change_address();">
  </div>
	<div class="content" id="content"></div>

  <div class="content-heji" id="content-heji"></div>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/SHA1.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
  <script type="text/x-dot-template"id="tmpl-1">
{{ for(var prop in it) { }}
{{? it[prop].goodState=='on'}}
  <div class="content-xinxi">
    <div class="picture">
              <a href="#"><img src="{{=it[prop].cimage.url}}" ></a>
          </div>
          <div class="content-xinxi1">
            <p class="xinxi1_title">{{=it[prop].cname}}</p>
            <p class="xinxi1_classfy">描述：{{=it[prop].introduce}}</p>
            <p class="xinxi1_sum">×{{=it[prop].goodCount}}</p>
            <p class="xinxi1_money">单价：￥{{=it[prop].cprice}} </p>&nbsp;
            {{?it[prop].postage!=null}}
            <p class="xinxi1_money">邮费：￥{{=it[prop].postage}} </p>&nbsp;
            {{??}}
            <p class="xinxi1_money">邮费：0 </p>&nbsp;
            {{?}}
          </div>
  </div>
{{?}}
{{ } }}
  </script>

<script type="text/x-dot-template"id="tmpl-2">
<label for="">合计：</label><label for="">￥{{=it}}元</label>
<button class="button" onclick="pay();">提 交 订 单</button>
</script>

<script type="text/x-dot-template"id="tmpl-3">
{{? it!=''}}
<p class="name" id="name">收件人： {{=it[0].consignee}}</p>
<p class="telephone" id="telephone">收件人电话：{{=it[0].mobile}}</p>
<p class="dizhi" id="address">地址：{{=it[0].location}}</p>
<p class="dizhi" id="detailaddress">详细地址：{{=it[0].detailaddress}}</p>
{{??}}
<p class="name" id="name">没有设置地址，快去设置地址吧</p>
{{?}}
</script>
<script type="text/x-dot-template"id="tmpl-4">
{{? it!=null}}
<p class="name" id="name" value="{{=it.consignee}}">收件人： {{=it.consignee}}</p>
<p class="telephone" id="telephone" value="{{=it.mobile}}">收件人电话：{{=it.mobile}}</p>
<p class="dizhi" id="address" value="{{=it.location}}">地址：{{=it.location}}</p>
<p class="dizhi" id="detailaddress" value="{{=it.detailaddress}}">详细地址：{{=it.detailaddress}}</p>
{{??}}
<p class="name" id="name">没有设置地址，快去设置地址吧</p>
{{?}}
</script>
<script>

apiready=function(){
init();
getAmount(api.pageParam.curShoppingCart);
init_address();
init_listenevent();
}

function init_listenevent(){
  api.addEventListener({
      name: 'spjsy'
  }, function(ret, err){
      if( ret ){
           var user =$api.getStorage("user");
           var address_=[];
           for (var i = 0; i < user[0].address.length; i++) {
             if(user[0].address[i].id==ret.value.addressid)
             address_=user[0].address[i];
           }
           tmpltxt=doT.template(document.getElementById("tmpl-4").innerHTML);//生成模板方法
           document.getElementById("xinxi_dizhi").innerHTML=tmpltxt(address_);//数据渲染
      }else{
           alert('数据库连接失败');
      }
  });

}

function change_address(){
    api.openWin({
        name: 'cydz',
        url: './cydz.html',
        pageParam: {
            spjsy:true
        }
    });

}

// 计算购物车中的商品总数及总金额
function getAmount(data_) {
     amountValue = 0;
    for (var i = 0; i < data_.length; i++) {
        if (data_[i].goodState == 'on') {
          if(data_[i].postage != null){
                    amountValue += parseFloat(data_[i].cprice) * parseInt(data_[i].goodCount)+parseFloat(data_[i].postage);
                  }else {
                      amountValue += parseFloat(data_[i].cprice) * parseInt(data_[i].goodCount);
                  }
        }

    }
    amountValue = Math.round(amountValue * 10) / 10;

    tmpltxt=doT.template(document.getElementById("tmpl-2").innerHTML);//生成模板方法
    document.getElementById("content-heji").innerHTML=tmpltxt(amountValue);//数据渲染
}

function init(){

            //使用doT模板将用户信息放入html中
            // 编译模板函数
            tmpltxt=doT.template(document.getElementById("tmpl-1").innerHTML);//生成模板方法
            document.getElementById("content").innerHTML=tmpltxt(api.pageParam.curShoppingCart);//数据渲染
}

function pay(){

alert('功能尚未完成，敬请期待');
  //获得地址信息
//   var consignee = document.getElementById("name").value;
//   var mobile = document.getElementById("telephone").value;
//   var location = document.getElementById("address").value;
//   var detailaddress = document.getElementById("detailaddress").value;
//
//   var user = $api.getStorage('user');
//   //获取X-APICloud-AppKey值
//   var now = Date.now();
//   appKey = SHA1("A6032422409194"+"UZ"+"808CF36B-60D4-DC5D-C9F3-FB49F9E1FB44"+"UZ"+now)+"."+now
//
//
//  var  _address='{"consignee":'+consignee+',"mobile":'+mobile+'","loacation":'+location+'","detailaddress":'+detailaddress+'"}';
//  // var  _address_obj=JSON.parse(_address);
// alert(_address);
  //
  // api.ajax({
  //     url: "https://d.apicloud.com/mcm/api/user/"+user[0].id+"/order",
  //     method: 'POST',
  //     cache:  false,
  //     headers:{
  //       "X-APICloud-AppId": "A6032422409194",
  //       "X-APICloud-AppKey": appKey
  //     },
  //     data:{
  //       values: {
  //        "totalprice":amountValue,
  //       "ispay":false,
  //       "isreceived":false,
  //       "issend":false,
  //       "address":_address,
  //               }
  //     }
  // },function(ret, err){
  //     if (ret) {
  //       alert(JSON.stringify(ret));
  //     } else {
  //       alert('数据库连接失败');
  //     }
  // });
}

function init_address(){
  var user = $api.getStorage('user');

  //使用doT模板将用户信息放入html中
  // 编译模板函数
  tmpltxt=doT.template(document.getElementById("tmpl-3").innerHTML);//生成模板方法
  document.getElementById("xinxi_dizhi").innerHTML=tmpltxt(user[0].address);//数据渲染

}
</script>
</body>
</html>
